<template>
	<view>
		这是内容页面：介绍view组件的基本使用
		
		<!-- 属性前加上冒号，则后边引号中的值为表达式而不再是字符串 -->
		<!-- :hover-start-time="2000"延迟2s出现。:hover-stay-time="2000"等待2s消失 -->
		<view class="box2" hover-class="box2_active" :hover-start-time="2000" :hover-stay-time="2000">
			<view class="box1" hover-class="box1_active" hover-stop-propagation>这是一个盒子</view>
			<!-- hover-stop-propagation：阻止祖先出现点击态属性 -->
		</view>
		<button @click="changeTest">显示或隐藏TEST组件</button>
		<test v-if="flag" :title="title" @myEvent="getNum"></test>
		这是test子组件传递的数据{{num}}
		<test-a></test-a>
		<test-b></test-b>
	</view>
</template>

<script>
	import test from '../../components/test.vue';
	import tastA from '../../components/a.vue';
	import tastB from '../../components/b.vue';
	export default {
		data() {
			return {
				title: 'hello',
				flag: false,
				num: 0
			}
		},
		methods: {
			changeTest(){
				this.flag = !this.flag;
			},
			getNum(num){
				console.log(num);
				this.num = num;
			}
		},
		components:{	//组件注册
			test,	//键值相同可省略，一般格式：注册组件名:引入组件名
			'test-a' : tastA,
			'test-b' : tastB
		}
	}
</script>

<style>
	.box1{
		width: 100px;
		height: 100px;
		background-color: #555555;
	}
	.box1_active{
		background-color: #4CD964;
	}
	
	.box2{
		width: 200px;
		height: 200px;
		background-color: #ff55ff;
	}
	.box2_active{
		background-color: #ffff00;
	}
</style>
